<template>
  <div class="app-container">
    <!-- 主内容区域：左右布局 -->
    <div class="content-section">
      <el-card class="content-card">
        <div class="content-layout">
          <!-- 左侧：设备列表 -->
          <div class="device-list-section">
            <div class="list-header">
              <h3 class="section-title">重点设备列表</h3>
              <!-- 搜索框 -->
              <el-input
                v-model="deviceQuery.name"
                placeholder="搜索设备名称"
                class="search-input"
                clearable
                @clear="loadDeviceList"
                @keyup.enter="loadDeviceList"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
            </div>
            
            <!-- 设备列表 -->
            <div class="device-list" v-loading="deviceListLoading">
              <div 
                v-for="device in deviceList" 
                :key="device.id"
                class="device-card"
                :class="{ active: selectedDevice && selectedDevice.id === device.id }"
                @click="handleDeviceClick(device)"
              >
                <!-- 设备图片 -->
                <div class="device-image">
                  <el-image 
                    :src="device.snapshot || '/images/defaltDevice.png'" 
                    fit="cover"
                    class="device-photo"
                  >
                    <template #error>
                      <div class="image-slot">
                        <el-icon><Picture /></el-icon>
                      </div>
                    </template>
                  </el-image>
                </div>
                
                <!-- 设备信息 -->
                <div class="device-info">
                  <div class="device-name" :title="device.deviceName">{{ device.deviceName }}</div>
                  <div class="device-code">{{ device.deviceCode }}</div>
                  <!-- 标签行 -->
                  <div class="device-tags">
                    <div class="device-type">{{ device.deviceTypeName }}</div>
                    <!-- 在线状态 -->
                    <div class="status-badge" :class="getStatusClass(device.state)">
                      <span class="status-dot"></span>
                      <span class="status-text">{{ getStatusText(device.state) }}</span>
                    </div>
                  </div>
                </div>
              </div>
              
              <el-empty v-if="deviceList.length === 0" description="暂无重点设备数据" />
            </div>
            
            <!-- 分页 -->
            <div class="pagination-wrapper">
              <el-pagination
                :current-page="deviceQuery.curPage"
                :page-size="deviceQuery.pageSize"
                :total="deviceQuery.total"
                :page-sizes="[10, 20, 50, 100]"
                layout="total, sizes, prev, pager, next"
                small
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
              />
            </div>
          </div>

          <!-- 右侧：图表和表格 -->
          <div class="analysis-section">
            <!-- 设备未选择提示 -->
            <div v-if="!selectedDevice" class="empty-state">
              <el-empty description="请从左侧选择设备查看能耗分析" />
            </div>
            
            <!-- 设备已选择，显示数据 -->
            <div v-else class="analysis-content">
              <!-- 设备标题 -->
              <div class="device-header">
                <h3 class="device-title">{{ selectedDevice.deviceName }}</h3>
                <span class="device-subtitle">{{ selectedDevice.deviceCode }} | {{ selectedDevice.deviceTypeName }}</span>
              </div>
              
              <!-- 时间筛选区域 -->
              <div class="time-filter-section">
                <div class="time-filter">
                  <!-- 时间类型选择 -->
                  <div class="time-type-tabs">
                    <el-button 
                      :type="queryParams.timeType === 'day' ? 'primary' : ''" 
                      @click="handleTimeTypeChange('day')"
                      class="time-tab"
                    >
                      日
                    </el-button>
                    <el-button 
                      :type="queryParams.timeType === 'month' ? 'primary' : ''" 
                      @click="handleTimeTypeChange('month')"
                      class="time-tab"
                    >
                      月
                    </el-button>
                    <el-button 
                      :type="queryParams.timeType === 'year' ? 'primary' : ''" 
                      @click="handleTimeTypeChange('year')"
                      class="time-tab"
                    >
                      年
                    </el-button>
                  </div>
                  
                  <!-- 时间选择器 -->
                  <div class="time-picker">
                    <el-date-picker
                      v-model="queryParams.selectedTime"
                      :type="getDatePickerType()"
                      :format="getDateFormat()"
                      :value-format="getDateFormat()"
                      placeholder="选择时间"
                      class="date-input"
                    />
                  </div>
                  
                  <!-- 查询按钮 -->
                  <div class="query-section">
                    <el-button type="primary" @click="handleQuery" :loading="loading" class="query-btn">
                      查询
                    </el-button>
                  </div>
                </div>
              </div>
              
              <!-- 折线图 -->
              <div class="chart-wrapper">
                <div class="chart-title">能耗趋势分析</div>
                <div ref="chartRef" class="line-chart" v-loading="chartLoading"></div>
    </div>
    
              <!-- 数据表格 -->
              <div class="table-wrapper">
                <div class="table-title">能耗详细数据</div>
                <el-table
                  :data="tableData"
                  v-loading="tableLoading"
                  stripe
                  border
                  style="width: 100%;"
                  max-height="400"
                >
                  <el-table-column prop="timePeriod" label="时间段" align="center" min-width="100" />
                  <el-table-column prop="maxValue" label="最大值(kWh)" align="right" min-width="110">
                    <template #default="scope">
                      <span>{{ formatNumber(scope.row.maxValue) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="minValue" label="最小值(kWh)" align="right" min-width="110">
                    <template #default="scope">
                      <span>{{ formatNumber(scope.row.minValue) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="avgValue" label="平均值(kWh)" align="right" min-width="110">
                    <template #default="scope">
                      <span>{{ formatNumber(scope.row.avgValue) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="totalValue" label="总量(kWh)" align="right" min-width="110">
                    <template #default="scope">
                      <span class="total-value">{{ formatNumber(scope.row.totalValue) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="costMoney" label="成本金额(元)" align="right" min-width="120">
                    <template #default="scope">
                      <span class="cost-value">{{ formatNumber(scope.row.costMoney) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="carbonEmissions" label="碳排放(kg)" align="right" min-width="120">
                    <template #default="scope">
                      <span class="carbon-value">{{ formatNumber(scope.row.carbonEmissions) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="countNum" label="数据点数" align="center" min-width="90">
                    <template #default="scope">
                      <span>{{ scope.row.countNum }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick, getCurrentInstance } from 'vue'
import { Search, ArrowRight, Picture } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import { getDeviceList } from '@/api/deviceManage/device'
import { getStatisticsDevice } from '@/api/stat/home'

const { proxy } = getCurrentInstance()

// 响应式数据
const loading = ref(false)
const deviceListLoading = ref(false)
const chartLoading = ref(false)
const tableLoading = ref(false)
const chartRef = ref(null)
const chartInstance = ref(null)
const deviceList = ref([])
const selectedDevice = ref(null)
const tableData = ref([])

// 查询参数
const queryParams = reactive({
  timeType: 'month',
  selectedTime: new Date().getFullYear() + '-' + String(new Date().getMonth() + 1).padStart(2, '0')
})

// 设备列表查询参数
const deviceQuery = reactive({
  name: '', // API使用 name 字段进行搜索
  curPage: 1,
  pageSize: 10,
  total: 0
})

// 处理时间类型变化
function handleTimeTypeChange(type) {
  queryParams.timeType = type
  const now = new Date()
  
  if (type === 'day') {
    queryParams.selectedTime = now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0') + '-' + String(now.getDate()).padStart(2, '0')
  } else if (type === 'month') {
    queryParams.selectedTime = now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0')
  } else {
    queryParams.selectedTime = String(now.getFullYear())
  }
  
  // 如果已选中设备，重新加载数据
  if (selectedDevice.value) {
    loadDeviceData()
  }
}

// 获取日期选择器类型
function getDatePickerType() {
  switch (queryParams.timeType) {
    case 'day':
      return 'date'
    case 'month':
      return 'month'
    case 'year':
      return 'year'
    default:
      return 'month'
  }
}

// 获取日期格式
function getDateFormat() {
  switch (queryParams.timeType) {
    case 'day':
      return 'YYYY-MM-DD'
    case 'month':
      return 'YYYY-MM'
    case 'year':
      return 'YYYY'
    default:
      return 'YYYY-MM'
  }
}

// 查询
function handleQuery() {
  if (selectedDevice.value) {
    loadDeviceData()
  }
}

// 加载设备列表
async function loadDeviceList() {
  deviceListLoading.value = true
  try {
    const params = {
      name: deviceQuery.name,
      curPage: deviceQuery.curPage,
      pageSize: deviceQuery.pageSize,
      focusState: 1 // 只查询重点设备
    }
    const response = await getDeviceList(params)
    
    deviceList.value = response.data.list || []
    deviceQuery.total = response.data.totalCount || 0
    
    // 默认选中第一个设备
    if (deviceList.value.length > 0 && !selectedDevice.value) {
      selectedDevice.value = deviceList.value[0]
      // 加载第一个设备的数据
      loadDeviceData()
    }
    
  } catch (error) {
    console.error('加载设备列表失败:', error)
    proxy?.$modal?.msgError?.('加载设备列表失败')
  } finally {
    deviceListLoading.value = false
  }
}

// 处理分页大小变化
function handleSizeChange(size) {
  deviceQuery.pageSize = size
  deviceQuery.curPage = 1
  loadDeviceList()
}

// 处理页码变化
function handlePageChange(page) {
  deviceQuery.curPage = page
  loadDeviceList()
}

// 获取状态样式类
function getStatusClass(state) {
  return state === 0 ? 'online' : 'offline'
}

// 获取状态文本
function getStatusText(state) {
  return state === 0 ? '正常' : '异常'
}

// 处理设备点击
function handleDeviceClick(device) {
  selectedDevice.value = device
  loadDeviceData()
}

// 加载设备能耗数据
async function loadDeviceData() {
  if (!selectedDevice.value) return
  
  chartLoading.value = true
  tableLoading.value = true
  
  try {
    const params = {
      deviceCode: selectedDevice.value.deviceCode,
      statTime: queryParams.selectedTime
    }
    
    const response = await getStatisticsDevice(params)
    
    if (response.data && response.data.stats) {
      // 处理API返回的数据
      const processedData = processApiData(response.data.stats)
      
      // 更新图表和表格
      updateChart(processedData.chartData)
      tableData.value = processedData.tableData
    } else {
      // 如果没有数据，清空图表和表格
      updateChart({
        timeLabels: [],
        maxValues: [],
        minValues: [],
        avgValues: [],
        totalValues: []
      })
      tableData.value = []
    }
    
  } catch (error) {
    console.error('加载设备能耗数据失败:', error)
    proxy?.$modal?.msgError?.('加载能耗数据失败')
    // 出错时清空数据
    updateChart({
      timeLabels: [],
      maxValues: [],
      minValues: [],
      avgValues: [],
      totalValues: []
    })
    tableData.value = []
  } finally {
    chartLoading.value = false
    tableLoading.value = false
  }
}

// 处理API返回的数据
function processApiData(statsData) {
  const timeLabels = []
  const maxValues = []
  const minValues = []
  const avgValues = []
  const totalValues = []
  const tableDataList = []
  
  statsData.forEach(item => {
    // 根据时间类型格式化时间标签
    let timeLabel = item.hourName || ''
    if (queryParams.timeType === 'day') {
      // 日：提取小时部分 "2025-10-14 00:00" -> "00:00"
      timeLabel = timeLabel.split(' ')[1] || timeLabel
    } else if (queryParams.timeType === 'month') {
      // 月：提取日期部分 "2025-10-12" -> "12日"
      const day = timeLabel.split('-')[2]
      timeLabel = day ? `${parseInt(day)}日` : timeLabel
    } else {
      // 年：提取月份部分 "2025-10" -> "10月"
      const month = timeLabel.split('-')[1]
      timeLabel = month ? `${parseInt(month)}月` : timeLabel
    }
    
    timeLabels.push(timeLabel)
    maxValues.push((item.max_value || 0).toFixed(2))
    minValues.push((item.min_value || 0).toFixed(2))
    avgValues.push((item.average_value || 0).toFixed(2))
    totalValues.push((item.sum_value || 0).toFixed(2))
    
    tableDataList.push({
      timePeriod: timeLabel,
      maxValue: (item.max_value || 0).toFixed(2),
      minValue: (item.min_value || 0).toFixed(2),
      avgValue: (item.average_value || 0).toFixed(2),
      totalValue: (item.sum_value || 0).toFixed(2),
      costMoney: (item.cost_money || 0).toFixed(2),
      carbonEmissions: (item.carbonEmissions || 0).toFixed(2),
      countNum: item.countNum || 0,
      count: item.count || 0
    })
  })
  
  return {
    chartData: {
      timeLabels,
      maxValues,
      minValues,
      avgValues,
      totalValues
    },
    tableData: tableDataList
  }
}

// 更新折线图
function updateChart(data) {
  if (!chartRef.value) return
  
  if (!chartInstance.value) {
    chartInstance.value = echarts.init(chartRef.value)
  }
  
  // 如果没有数据，清空图表
  if (!data.timeLabels || data.timeLabels.length === 0) {
    chartInstance.value.clear()
    return
  }
  
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        label: {
          show: true,
        },
      },
      formatter: function(params) {
        if (!params || params.length === 0) return ''
        
        const timeLabel = params[0].axisValue
        let tooltipContent = `<div style="font-weight: 600; margin-bottom: 8px; color: #2c3e50;">${timeLabel}</div>`
        
        params.forEach(param => {
          const value = parseFloat(param.value).toLocaleString('zh-CN', { 
            minimumFractionDigits: 2, 
            maximumFractionDigits: 2 
          })
          const color = param.color
          const name = param.seriesName
          
          tooltipContent += `
            <div style="display: flex; align-items: center; margin-bottom: 4px;">
              <span style="display: inline-block; width: 8px; height: 8px; background-color: ${color}; border-radius: 50%; margin-right: 8px;"></span>
              <span style="color: #606266;">${name}:</span>
              <span style="margin-left: 8px; font-weight: 600; color: #2c3e50;">${value} kWh</span>
            </div>
          `
        })
        
        return tooltipContent
      }
    },
    legend: {
      data: ['最大值', '最小值', '平均值', '总量'],
      top: 10,
      textStyle: {
        color: '#606266'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: data.timeLabels,
      axisLabel: {
        color: '#606266',
        rotate: data.timeLabels.length > 20 ? 45 : 0
      },
      axisLine: {
        lineStyle: {
          color: '#E4E7ED'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '能耗(kWh)',
      nameTextStyle: {
        color: '#606266'
      },
      axisLabel: {
        color: '#606266'
      },
      axisLine: {
        lineStyle: {
          color: '#E4E7ED'
        }
      },
      splitLine: {
        lineStyle: {
          color: '#E4E7ED',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        name: '最大值',
        type: 'line',
        smooth: true,
        data: data.maxValues,
        itemStyle: {
          color: '#F56C6C'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(245, 108, 108, 0.3)'
            }, {
              offset: 1,
              color: 'rgba(245, 108, 108, 0.05)'
            }]
          }
        }
      },
      {
        name: '最小值',
        type: 'line',
        smooth: true,
        data: data.minValues,
        itemStyle: {
          color: '#409EFF'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(64, 158, 255, 0.3)'
            }, {
              offset: 1,
              color: 'rgba(64, 158, 255, 0.05)'
            }]
          }
        }
      },
      {
        name: '平均值',
        type: 'line',
        smooth: true,
        data: data.avgValues,
        itemStyle: {
          color: '#67C23A'
        },
        lineStyle: {
          width: 3
        }
      },
      {
        name: '总量',
        type: 'line',
        smooth: true,
        data: data.totalValues,
        itemStyle: {
          color: '#E6A23C'
        },
        lineStyle: {
          type: 'dashed',
          width: 2
        }
      }
    ]
  }
  
  chartInstance.value.setOption(option)
  
  // 响应窗口大小变化
  window.addEventListener('resize', () => {
    chartInstance.value?.resize()
  })
}

// 格式化数字
function formatNumber(value) {
  if (!value) return '0'
  return parseFloat(value).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}

// 页面初始化
onMounted(() => {
  nextTick(() => {
    loadDeviceList()
  })
})
</script>

<style lang="scss" scoped>
.app-container {
  padding: 10px;
  background: #F1F2F5;
  height: 100%;
}

// 主内容区域样式
.content-section {
  height: 100%;
  .content-card {
    border-radius: 8px;
    box-shadow: none;
    height: 100%;
    background: transparent;
    
    .content-layout {
      display: flex;
      gap: 20px;
      height: 100%;
      
      // 左侧：设备列表
      .device-list-section {
        flex: 0 0 300px;
        border-right: none;
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        
        .list-header {
          padding: 20px;
          border-bottom: 1px solid #e4e7ed;
          
          .section-title {
            font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
            margin: 0 0 12px 0;
          }
          
          .search-input {
            width: 100%;
          }
        }
        
        .device-list {
          flex: 1;
          overflow-y: auto;
          padding: 10px;
          max-height: calc(100vh - 380px);
          
          .device-card {
            display: flex;
            align-items: center;
            gap: 12px;
            background: #ffffff;
            border-radius: 8px;
            padding: 10px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.3s;
            border: 2px solid transparent;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            
            &:hover {
              border-color: #4fdaca;
              box-shadow: 0 4px 12px rgba(79, 218, 202, 0.25);
              transform: translateX(2px);
            }
            
            &.active {
              border-color: #4fdaca;
              background: linear-gradient(135deg, rgba(79, 218, 202, 0.05) 0%, rgba(50, 183, 203, 0.05) 100%);
              box-shadow: 0 4px 16px rgba(79, 218, 202, 0.3);
              
              .device-info {
                .device-name {
                  color: #4fdaca;
                  font-weight: 600;
                }
              }
            }
            
            // 设备图片区域（左侧）
            .device-image {
              flex: 0 0 80px;
              width: 80px;
              height: 80px;
              border-radius: 6px;
              overflow: hidden;
              background: #f5f7fa;
              
              .device-photo {
                width: 100%;
                height: 100%;
                
                :deep(.el-image__inner) {
                  object-fit: cover;
                }
              }
              
              .image-slot {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
                color: #c0c4cc;
                font-size: 32px;
              }
            }
            
            // 设备信息区域（右侧）
            .device-info {
              flex: 1;
              display: flex;
              flex-direction: column;
              gap: 4px;
              min-width: 0;
              
              .device-name {
    font-size: 14px;
                font-weight: 600;
                color: #2c3e50;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                transition: color 0.3s;
              }
              
              .device-code {
                font-size: 11px;
                color: #909399;
                font-family: 'Courier New', monospace;
              }
              
              // 标签行
              .device-tags {
                display: flex;
                align-items: center;
                gap: 6px;
                
                .device-type {
                  display: inline-block;
                  font-size: 11px;
                  color: #4fdaca;
                  background: rgba(79, 218, 202, 0.1);
                  padding: 2px 6px;
                  border-radius: 3px;
                  font-weight: 500;
                  white-space: nowrap;
                }
                
                // 在线状态
                .status-badge {
                  display: flex;
                  align-items: center;
                  gap: 4px;
                  padding: 3px 8px;
                  border-radius: 10px;
                  font-size: 11px;
                  font-weight: 500;
                  white-space: nowrap;
                  
                  &.online {
                    background: rgba(103, 194, 58, 0.15);
                    color: #67C23A;
                    
                    .status-dot {
                      background: #67C23A;
                    }
                  }
                  
                  &.offline {
                    background: rgba(245, 108, 108, 0.15);
                    color: #F56C6C;
                    
                    .status-dot {
                      background: #F56C6C;
                    }
                  }
                  
                  .status-dot {
                    width: 5px;
                    height: 5px;
                    border-radius: 50%;
                    animation: pulse 2s infinite;
                  }
                  
                  .status-text {
                    line-height: 1;
                  }
                }
              }
            }
          }
        }
        
        .pagination-wrapper {
          padding: 12px 20px;
          border-top: 1px solid #e4e7ed;
          background: #fafafa;
          
          :deep(.el-pagination) {
            justify-content: center;
          }
        }
      }
      
      // 右侧：分析区域
      .analysis-section {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 20px;
        overflow-y: auto;
        overflow-x: hidden;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        
        .empty-state {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
          min-height: 400px;
        }
        
        .analysis-content {
          display: flex;
          flex-direction: column;
          gap: 20px;
          
          .device-header {
            padding-bottom: 12px;
            border-bottom: 2px solid #e4e7ed;
            
            .device-title {
        font-size: 18px;
              font-weight: 600;
              color: #1a1a1a;
              margin: 0 0 6px 0;
            }
            
            .device-subtitle {
              font-size: 13px;
              color: #909399;
            }
          }
          
          // 时间筛选区域
          .time-filter-section {
            background: #fff;
            border-radius: 6px;
            padding: 12px 16px;
            border: 1px solid #e4e7ed;
            
            .time-filter {
              display: flex;
              align-items: center;
              gap: 12px;
              
              .time-type-tabs {
                display: flex;
                gap: 0;
                border: 1px solid #dcdfe6;
                border-radius: 6px;
                overflow: hidden;
                
                .time-tab {
                  border: none;
                  border-radius: 0;
                  min-width: 50px;
                  height: 32px;
                  font-size: 14px;
                  background: #ffffff;
        color: #606266;
                  
                  &:not(:last-child) {
                    border-right: 1px solid #dcdfe6;
                  }
                  
                  &.el-button--primary {
                    background: #4fdaca;
                    color: white;
                    border-color: #4fdaca;
                  }
                  
                  &:hover:not(.el-button--primary) {
                    background: #f5f7fa;
                  }
                }
              }
              
              .time-picker {
                .date-input {
                  width: 160px;
                  height: 32px;
                }
              }
              
              .query-section {
                .query-btn {
                  border-radius: 6px;
                  height: 32px;
                  background: #4fdaca;
                  border-color: #4fdaca;
                  
                  &:hover {
                    background: #32b7cb;
                    border-color: #32b7cb;
                  }
                }
              }
            }
          }
          
          .chart-wrapper {
            background: #fff;
            border-radius: 6px;
            padding: 16px;
            border: 1px solid #e4e7ed;
            
            .chart-title {
              font-size: 14px;
              font-weight: 600;
              color: #2c3e50;
              margin-bottom: 12px;
            }
            
            .line-chart {
              width: 100%;
              height: 350px;
            }
          }
          
          .table-wrapper {
            background: #fff;
            border-radius: 6px;
            padding: 16px;
            border: 1px solid #e4e7ed;
            
            .table-title {
              font-size: 14px;
              font-weight: 600;
              color: #2c3e50;
        margin-bottom: 12px;
            }
            
            .total-value {
              font-weight: 600;
              color: #4fdaca;
            }
            
            .cost-value {
              font-weight: 600;
              color: #E6A23C;
            }
            
            .carbon-value {
              font-weight: 600;
              color: #67C23A;
            }
          }
        }
      }
    }
  }
}

// Element Plus 组件样式覆盖
.content-card {
  :deep(.el-card__body) {
    padding: 0;
    height: 100%;
    background: transparent;
  }
  
  border: none !important;
}

:deep(.el-table) {
  .el-table__header {
    th {
      background: #f8f9fa;
      color: #2c3e50;
      font-weight: 600;
    }
  }
  
  .el-table__row {
    &:hover > td {
      background-color: #f5f7fa !important;
    }
  }
}

:deep(.el-input__wrapper) {
  border-radius: 6px;
  
  &:hover {
    border-color: #4fdaca;
  }
  
  &.is-focus {
    border-color: #4fdaca;
    box-shadow: 0 0 0 2px rgba(79, 218, 202, 0.2);
  }
}

:deep(.el-date-editor) {
  .el-input__wrapper {
    border-radius: 6px;
    
    &:hover {
      border-color: #4fdaca;
    }
    
    &.is-focus {
      border-color: #4fdaca;
      box-shadow: 0 0 0 2px rgba(79, 218, 202, 0.2);
    }
  }
}

:deep(.el-button) {
  border-radius: 6px;
  
  &.el-button--primary {
    background: linear-gradient(135deg, #4fdaca 0%, #32b7cb 100%);
    border-color: #4fdaca;
    
    &:hover {
      background: linear-gradient(135deg, #32b7cb 0%, #4fdaca 100%);
    }
  }
}

// 时间类型按钮组特殊样式（全局）
.time-filter-section,
.analysis-content {
  .time-type-tabs {
    :deep(.el-button) {
      border-radius: 0 !important;
      border: none !important;
      
      &.time-tab {
        background: #ffffff !important;
        color: #606266 !important;
        
        &.el-button--primary {
          background: #4fdaca !important;
          color: white !important;
        }
        
        &:hover:not(.el-button--primary) {
          background: #f5f7fa !important;
        }
        
        &:focus {
          outline: none;
          box-shadow: none;
        }
      }
    }
  }
}

// 滚动条样式
.device-list::-webkit-scrollbar,
.analysis-section::-webkit-scrollbar {
  width: 6px;
}

.device-list::-webkit-scrollbar-thumb,
.analysis-section::-webkit-scrollbar-thumb {
  background: #dcdfe6;
  border-radius: 3px;
  
  &:hover {
    background: #c0c4cc;
  }
}

.device-list::-webkit-scrollbar-track,
.analysis-section::-webkit-scrollbar-track {
  background: #f5f7fa;
}

// 状态点脉冲动画
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}
</style>
